<template>
	<div>
		<div class="search-warp">
			<input v-model="keyword" class="search-box" type="text" placeholder="输入城市名或拼音"  />
		</div>
		<div class="search-content" v-show="keyword" ref="resultList">
			<ul>
				<li class="item border-bottom" v-for="item in list" @click="handleCityClick(item.name)">{{item.name}}</li>
				<li class="item border-bottom" v-if="!list.length">搜索不到匹配的结果</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default{
		name:'CitySearch',
		data(){
			return{
				keyword:'',
				timer:false,
				list:[]
			}
		},
		props:{
			cities:{
				type:Object,
				default:{}
			}
		},
		methods:{
			handleCityClick(city){
				this.$store.commit('changeCity',city)
				this.$router.push('/')
			}
		},
		watch:{
			keyword(){
				if(!this.keyword){
					this.list = []
					return
				}
				if(this.timer){
					window.setInterval(this.timer)
				}
				this.timer = window.setTimeout(()=>{
					const result = []
					for(let i in this.cities){
						this.cities[i].forEach((value)=>{
								if(value.name.indexOf(this.keyword) > -1 || value.spell.indexOf(this.keyword) > -1){
								result.push(value)
							}
						})		
					}
					this.list = result
				},100)

			}
		},
		mounted(){
			this.Bscroll = new Bscroll(this.$refs.resultList)
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/common.styl'
	.search-warp
		padding:0 .1rem
		height:.72rem
		background:$bgColor
		.search-box
			box-sizing:border-box
			padding:0 .1rem
			width:100%
			height:.62rem
			line-height:.62rem
			text-align:center
			border-radius:.06rem
			color:#666
	.search-content	
		z-index:1
		overflow:hidden
		position:absolute
		top:1.58rem
		left:0
		right:0
		bottom:0
		background:#fff
		.item
			line-height:.62rem
			padding-left:.2rem
			
</style>